<template>
	<view class="apply-body">

		<view class="info-list">
			<textarea rows="10" style="width: 95%;height: 150px;resize:none;padding: 20px;
  ;" placeholder="这一刻的想法…" maxlength="200"
			 v-model="ideaText">
		</textarea>
		</view>
		<view class="info-payment">
			<view class="info-payment-wrapper">
				<view class="fk_img">
					<view class="evaluate-c-b">
						<view class="goods-img-item" v-for="(item, key) in images" :key="key">
							<image class="del" src="/static/images/del.png" mode="" @click="delImage(item)"></image>
							<image class="" :src="item" mode=""></image>
							<input class="upLoad" type="file" accept="image/*" @change="doUpload($event,'one')">
						</view>
						<view class="upload-img" v-show="isImage" @click="upImage($event,'one')">
							<image class="icon" src="../../static/images/image_add.png" mode="" style="width: 100%;height: 100%;"></image>
							<!-- <view class="">上传照片</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="classify">
			<view style="font-size: 15px;">选择分类</view>
			<view class="class-left" @tap="handleTap('picker')">
				<view style="margin-right: 5px;font-size: 15px;">{{value1}}</view>
				<image src="../../static/images/left.png" style="width: 10px;height: 16px;"></image>
			</view>
		</view>
		<lb-picker ref="picker" v-model="value1" mode="selector" :list="MomentsType" @change="handleChange" @confirm="handleConfirm"
		 @cancel="handleCancel">
		</lb-picker>

		<view style="position: fixed;width: 100%;bottom: 60px;" @click="submit()">
			<view class="info-pass">发布</view>
		</view>

		<!--授权弹框-->
		<view class="search-body">
			<view class="dialog-container" v-if="tokenShow">
				<view class="dialog-mask"></view>
				<view class="dialog-info">
					<view class="dialog-title">您还未授权</view>
					<view class="dialog-content">请先授权再进行操作</view>
					<view class="dialog-footer">
						<button @click="dontLogin()" class="dialog-btn">暂不登录</button>
						<button @getuserinfo="getLogin" open-type="getUserInfo" class="dialog-btn" style="background-color:#FF5F49;color: #fff;">立即授权</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker';
	export default {
		data() {
			return {
				ideaText: "", //反馈问题
				images: [], //图片
				image_max: 6, //用于前台判断上传图片按钮是否显示
				refund_input_noedit: true,
				mode: 'aspectFill',
				pumping: ['爱美会', '爱美会2'],
				value1: '',
				MomentsType: [], //友嘉类型
				momentsId: "", //
				img: '/static/images/zhen1.jpg',
				oss: {},
				token: "",
				tokenShow: "",
				optionIndex:1,
				isSubmit:false, // 是否提交
			};
		},
		components: {
			LbPicker
		},
		onNavigationBarButtonTap(e) {
			console.log("点击了自定义按钮");
			console.log(e.index); //按钮的id，根据定义的顺序0,1,2
			uni.navigateTo({
				url: '../ideaList/index'
			});
		},
		computed: {
			isImage() {
				let num = this.image_max - this.images.length;
				if (num > 0) {
					return true;
				} else {
					return false;
				}
			}
		},
		onLoad() {
			this.getMomentsType();
			this.getOss()
		},
		methods: {
			//选择分类
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(item) {
				console.log('change::', item);
				this.momentsId = item.item.id
			},
			handleConfirm(item) {
				console.log(item);
				this.momentsId = item.item.id;
				this.optionIndex = item.index+1;
				console.log("选择"+this.optionIndex)
			},
			handleCancel(item) {
				console.log('cancel::', item);
			},

			hanldToIdeaList() {
				uni.navigateTo({
					url: '../ideaList/index'
				});
			},

			//友嘉类型
			getMomentsType() {
				this.$http.get('/moments/type').then((response) => {
					const res = response.data.data;
					console.log(res);
					console.log(this.list1);
					this.MomentsType = res;
					this.MomentsType.shift();
					this.value1 = this.MomentsType[0].value;
					this.momentsId = this.MomentsType[0].id;
				})
			},
			//提交
			submit(e) {
				if(this.isSubmit){
					return false;
				}
				
				var str = "";
				for (var i = 0; i < this.images.length; i++) {
					str += this.images[i].url + ",";
				}
				//去掉最后一个逗号(如果不需要去掉，就不用写)
				if (str.length > 0) {
					str = str.substr(0, str.length - 1);
				}
				console.log(str);
				console.log(this.images)
				let arr2 = this.images;
				let str3 = arr2.join(",")
				console.log(str3) //1,2,3,4,5

				const formData = {
					type: this.momentsId,
					atlas: str3,
					content: this.ideaText
				}
					
				this.isSubmit = true;
				uni.showLoading({
					title: '正在发布中'
				});
				
				this.$http.post('moments/moments', formData).then((response) => {
					const res = response.data;
					if (res.code == 0) {
						console.log(this.momentsId)
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						uni.reLaunch({
							url: `/pages/Friendsjia/Friendsjia?index=${this.optionIndex}&monType=${this.momentsId}`
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
					this.isSubmit = false;
				})
			},
			//获取oss
			getOss() {
				this.$http.get('/index/oss').then((response) => {
					const res = response.data.data;
					// console.log(res);
					this.oss = res;
				})
			},

			//上传图片
			upImage() {
				this.token = uni.getStorageSync('accessToken')
				if (this.token == '') {
					this.tokenShow = true;
				}
				if (this.token) {
					var self = this;
					console.log(6 - self.images.length)
					console.log("self")
					uni.chooseImage({
						count: 6 - self.images.length, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: function(res) {
							console.log(res);
							// let Imgsrc = res.tempFilePaths[0];
							// let fileName = self.getFileName(Imgsrc); // 自定义上传后的文件名称
							// self.fileUpload('video', Imgsrc, fileName);

							var filelist = [];
							var Imgsrc = res.tempFilePaths;
							for (var i = 0; i < Imgsrc.length; i++) {

								let fileName = self.getFileName(Imgsrc[i]); // 自定义上传后的文件名称
								self.fileUpload('video', Imgsrc[i], fileName);


							}
						}
					});
				}


			},
			// 文件上传
			fileUpload(type, path, stroeAs, e) {
				console.log(e)
				let self = this;
				uni.showLoading({
					title: '文件上传中'
				});
				var requestTask = uni.request({
					url: 'https://lxj.8vp4ra.cn/index/oss', //请求后台签名地址。
					header: {
						token: uni.getStorageSync("accessToken")
					},
					complete: res => {
						var data = res.data.data;
						console.log(path)
						console.log("path")
						uni.uploadFile({
							url: data.host, //后台给的阿里云存储给的上传地址
							filePath: path,
							fileType: type,
							name: 'file',
							formData: {
								key: `lxj/${stroeAs}`,
								// name: stroeAs, //文件名
								policy: data.policy, //后台获取超时时间
								OSSAccessKeyId: data.accessid, //后台获取临时ID
								success_action_status: '200', //让服务端返回200,不然，默认会返回204
								signature: data.signature //后台获取签名
							},
							success: res => {
								console.log(data);
								// console.log('uploadImage success, res is:', res);
								let dir = data.dir;
								console.log(dir);
								let url = `${data.host}/lxj/${stroeAs}`;
								console.log(url);

								self.images.push(url);

								uni.hideLoading();
								uni.showToast({
									title: '上传成功',
									icon: 'success',
									duration: 1000
								});
								// self.imageList = self.imageList.concat(path);
								// self.formData.images.push(osshost + '/' + stroeAs);


							},
							fail: err => {
								uni.hideLoading();
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							}
						});
					}
				});
			},
			_getSuffix(filename) {
				console.log(filename)
				console.log("filename")
				let pos = filename.lastIndexOf('.');
				let suffix = '';
				if (pos != -1) {
					suffix = filename.substring(pos);
				}
				return suffix;
			},
			getFileName(filename) {
				return (
					new Date().getTime() +
					Math.random()
					.toString(36)
					.substring(3, 20) +
					this._getSuffix(filename)
				);
			},

			//删除图片
			delImage(e) {
				let newImages = [];
				console.log(e)
				console.log(this.images)
				for (var i = 0; i < this.images.length; i++) {
					if (this.images[i] != e) {
						newImages.push(this.images[i]);
					}
				}
				this.images = newImages;
			},
			dontLogin() {
				this.tokenShow = false
			},
			//授权
			getLogin() {

				var that = this;
				wx.login({
					//获取code 使用wx.login得到的登陆凭证，用于换取openid==token代替
					success(res) {
						if (res.code) {
							console.log(res.code);
							that.code = res.code;
							//使用 wx.getSetting 获取用户当前的授权状态。
							wx.getSetting({
								success(res) {
									if (res.authSetting['scope.userInfo']) { //已授权=>getUserInfo
										wx.getUserInfo({
											success(res) {
												console.log(res)
												console.log("ressss")
												console.log(that.userinfo)

												const formData = {
													code: that.code,
													avatar: res.userInfo.avatarUrl,
													nickname: res.userInfo.nickName
												}
												that.$http.post('/login/wxLogin', formData).then((response) => {
													const res = response.data;
													console.log(res.data.token);
													if (res.data.token) {
														that.$http.setConfig((config) => { /* 设置全局配置 */
															config.header = {
																...config.header,
																token: res.data.token,
															}
															return config
														})
														wx.setStorageSync("accessToken", res.data.token); //成功之后存入token
													}
													that.initData()
													that.getMomentsType();
													if (that.monType == 1) {
														that.getmomentsList()
													}
													that.tokenShow = false;
													uni.showToast({
														title: res.msg,
														icon: 'none'
													});
												})
											},
											fail(err) {
												console.log(err)
											}
										})
									}
								}
							})
						} else {
							console.log("登录失败！" + res.errMsg);
						}
					}
				});
			},
		}
	}
</script>

<style>
	.apply-body {
		font-size: 16px;
		background-color: #fff;
		width: 100%;
	}

	.gener-icon {
		position: fixed;
		right: 20px;
		top: 10px;
		z-index: 999999999999;
	}

	.gener-icon image {
		width: 30px;
		height: 30px;
	}


	.info-list {
		display: flex;
		flex-direction: column;
		background-color: #fff;
	}

	.info-item {
		margin: 5px 0;
		position: relative;
	}

	.info-right {
		position: absolute;
		right: 0;
		line-height: 50px;
	}

	.info-right image {
		width: 40px;
		height: 40px;
		margin-top: 5px;
		border-radius: 50%;
		margin-right: 5px;
	}

	.info-left {
		line-height: 50px;
		color: #969993;
	}

	.info-name {
		position: relative;
		top: -10px;
	}

	.info-count {
		font-size: 12px;
	}

	.info-number {
		padding-top: 20px;
		color: #969993;
	}

	.info-count-number {
		color: #F83600;
		padding-top: 10px;
		font-size: 18px;
	}

	.info-payment {
		background-color: #fff;
	}

	.info-payment-wrapper {
		display: flex;
		flex-direction: row;
		padding: 10px 0;
	}

	.info-payment-img {
		padding-right: 10px;
		height: 100px;
		width: 110px;
	}

	.info-payment-img image {
		width: 100%;
		height: 100%;
	}

	.info-title {
		padding: 0 30px;
	}

	.info-bottom {
		height: 80px;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-items: right;
		justify-content: flex-end;
		align-items: center;
	}

	.info-no-pass {
		height: 35px;
		margin: 0 20px;
		background-color: #FF5F49;
		border-radius: 20px;
		text-align: center;
		line-height: 35px;
		color: #969993;
		margin-right: 10px;
	}

	.info-pass {
		height: 40px;
		background-color: #FF5F49;
		border-radius: 5px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		margin: 0 20px;
		font-size: 15px;
	}

	.info-img {
		height: 120px;
		width: 120px;
		margin: auto;
	}

	.info-img image {
		width: 100%;
		height: 100%;
	}

	.info-text {
		font-size: 14px;
		text-align: center;
		color: #969993;
		padding-bottom: 20px;
	}

	.info-pass-rapper {
		width: 100%;
	}

	/*上传图片*/
	.question {
		width: 100%;
		min-height: 100%;
	}

	.card-content {
		padding: 10px 0 !important;
	}

	/* .question .mu-raised-button{ margin: 10px 10%; width: 80%;} */
	.question a {
		background: none;
		box-shadow: none;
		border: 1px solid rgba(17, 11, 21, 1);
		color: #110B15;
	}

	.update {
		width: 100%;
		/* height: 100%; */
	}

	.update .name {
		width: 100%;
		padding: 15px 0;
	}

	.update .name input {
		width: 100%;
		border: 0;
		height: 48px;
		background: rgba(255, 255, 255, 1);
		border-radius: 5px;
		outline: none;
		padding: 0 15px;
	}

	.update .info {
		width: 100%;
		padding: 0 15px;
	}

	.update .info p {
		font-size: 12px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: rgba(120, 120, 120, 1);
	}

	.btn_info {
		text-align: center;
		margin-top: 50px;
	}

	.update .info .btn {
		width: 309px;
	}

	.line_brief {
		background: #fff;
		border-radius: 5px;
		border: 1px solid rgba(230, 230, 230, 1);
		padding-bottom: 8px !important;
	}

	.question_list {
		position: fixed;
		top: 34px;
		z-index: 100012;
		right: 15px;
	}

	.question_list p {
		font-size: 14px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: rgba(254, 73, 70, 1);
	}

	.fk_img {
		width: 100%;
		padding: 0 15px;
		display: flex;
	}

	.up_img {
		width: 70px;
		height: auto;
		text-align: center;
		position: relative;
	}

	.up_img image {
		width: 70px;
		height: 70px;
	}

	.up_img input {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.up_img .text {
		font-size: 14px;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: rgba(120, 120, 120, 1);
	}

	.list_img .info {
		margin-left: 8px;
	}

	.list_img .info image {
		width: 70px;
		height: 70px;
	}

	.footer_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		margin: 0;
		height: 48px;
		border-radius: 0;
		background: linear-gradient(90deg, rgba(159, 205, 164, 1) 0%, rgba(54, 157, 65, 1) 100%);
	}

	.list_img {
		display: flex;
		flex-wrap: wrap;
	}

	.evaluate-c-b {
		overflow: hidden;
	}

	.upload-img {
		width: 80px;
		height: 80px;
		text-align: center;
		color: #999999;
		font-size: 11px;
		border-radius: 2px;
		display: inline-block;
		float: left;
		margin: 7px;
	}

	.goods-img-item {
		width: 80px;
		height: 80px;
		margin: 7px;
		float: left;
		position: relative;
	}

	.goods-img-item:nth-child(4n) {
		margin-right: 0;
	}

	.goods-img-item image {
		width: 100%;
		height: 100%;
	}

	.del {
		width: 40upx !important;
		height: 40upx !important;
		position: absolute;
		right: -10px;
		top: 0;
		z-index: 999;
	}

	.classify {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 30px;
		color: #333;

	}

	.class-left {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	/*授权*/
	.dialog-mask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
	}

	.dialog-info {
		position: fixed;
		z-index: 5000;
		width: 80%;
		max-width: 600rpx;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #ffffff;
		text-align: center;
		overflow: hidden;
	}

	.dialog-title {
		font-size: 36rpx;
		padding: 30rpx 30rpx 10rpx;
	}

	.dialog-content {
		padding: 10rpx 30rpx 20rpx;
		min-height: 80rpx;
		font-size: 32rpx;
		line-height: 1.3;
		word-wrap: break-word;
		word-break: break-all;
		color: #999999;
	}

	.dialog-footer {
		display: flex;
		align-items: center;
		position: relative;
		line-height: 90rpx;
		font-size: 34rpx;
	}

	.dialog-btn {
		display: block;
		-webkit-flex: 1;
		flex: 1;
		position: relative;
		font-size: 16px;
	}

	button {
		background-color: #fff;
		border-radius: 0;
	}

	button::after {
		border-radius: 0;
	}
</style>
